<template>
  <section class="StudentSelect__container">
    <el-dialog
      title="设置学生"
      :visible.sync="isShow"
      :close-on-click-modal="false"
      width="60%"
    >
      <student-search ref="search" @onSearch="doSearch">
        <student-list :items="items">
          <template slot="action-bar">
            <el-checkbox />
          </template>
          <template slot="row-action-bar" slot-scope="scope">
            <el-checkbox v-model="scope.row.selected" />
          </template>
        </student-list>
      </student-search>

      <span slot="footer" class="dialog-footer">
        <el-button size="medium" type="primary" @click="doOk" :loading="loading"
          >确 定</el-button
        >
        <el-button size="medium" @click="isShow = false">取 消</el-button>
      </span>
    </el-dialog>
  </section>
</template>

<script>
import _api from "@/common/api/student";
import Gender from "../Common/Gender.vue";
import GradeSelect from "../Common/GradeSelect.vue";
import StudentSearch from "../Student/StudentSearch.vue";
import StudentList from "../Student/StudentList.vue";

export default {
  components: { Gender, GradeSelect, StudentSearch, StudentList },
  data() {
    return {
      loading: false,
      isShow: false,
      form: {},
      rules: {
        name: [{ required: true, message: "名称不能为空", trigger: "blur" }],
      },
      items: [],
    };
  },
  methods: {
    showDialog() {
      // this.$refs.search.getStudents();
      this.isShow = true;
    },

    doSearch(items) {
      this.items = items;
    },

    doOk() {
      this.loading = true;

      try {
        // this.$refs.form.validate(async (valid) => {
        //   if (valid) {
        //     await _api.editAsync(this.form);
        //     this.$emit("edited", {});
        //     this.isShow = false;
        //   }
        // });

        const selected = this.items
          .filter((m) => m.selected == true)
          .map((m) => m.id);

        this.$emit("selected", selected);
        this.isShow = false;
      } finally {
        this.loading = false;
      }
    },
  },
  mounted() {},
};
</script>

<style>
</style>